<template>
    <van-nav-bar title="我的班级" left-text="返回" left-arrow @click-left="onClickLeft" />

    <van-notice-bar left-icon="volume-o" text="在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。" />

    <div class="barrage_box">
        <van-barrage v-model="list">
            <div class="video" style="width: 100%; height: 150px"></div>
        </van-barrage>
        <van-space style="margin-top: 10px">
            <input v-model="wen" class="inp" type="text" />
            <van-button @click="add" type="primary" size="small"> 发送 </van-button>
        </van-space>
    </div>

    <div class="people">
        <h3 class="peo">班级成员</h3>
        <van-collapse v-model="activeNames">
            <van-collapse-item title="教师" name="1">
                <ul v-for="item in tealist" :key="item.id">
                    <li>{{ item.subject }}：{{ item.name }}</li>
                </ul>
            </van-collapse-item>
            <van-collapse-item title="学生" name="2">
                <div >
                    <ul v-for="item in stulist" :key="item.id">
                    <li>{{ item.name }}</li>
                </ul>
            </div>
                
            </van-collapse-item>
        </van-collapse>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import type { Ref } from "vue";
import { getclassData } from "@/api/teacher"

const wen: Ref<string> = ref('')
const activeNames: Ref<string[]> = ref([])

function onClickLeft() {
    history.back()
}

interface IList {
    id: number,
    text: string
}
const list: Ref<IList[]> = ref([
    {
        id: 1,
        text: '一起学习！'
    },
    {
        id: 2,
        text: '一起加油！'
    },
    {
        id: 3,
        text: '耶耶耶ey！'
    }
])
let obj: Ref<IList[]> = ref([])
function add() {
    if (wen.value !== '')
        obj = {
            id: list.value.length + 1,
            text: wen.value
        }
    list.value.push(obj)
    wen.value = ''
}

interface ITeacher {
    name: string,
    id: number,
    subject: string
}
const tealist: Ref<ITeacher[]> = ref([])
interface IStudent {
    name: string,
    id: number,
    age: number
}
const stulist: Ref<IStudent[]> = ref([])

onMounted(async () => {
    const { data } = await getclassData()
    tealist.value = data[0].teachers
    stulist.value = data[0].students

    
    return activeNames
})

</script>

<style scoped lang="scss">
.video {
    background-color: #7fedff8a;
}

.inp {
    margin-left: 20px;
    height: 26px;
    width: 276px;
}

.peo {
    margin-left: 14px;
}

li {
    width: 100%;
    height: 40px;
    padding-left: 10px;
}
</style>
